<template>
  <div class="app-container">
    <div>
      <div class="top">
        <span>新增协会</span>
        <div />
      </div>
      <el-row :span="24" justify="start" type="flex">
        <el-col :span="10">
          <div class="title">
            <p class="font">协会名称</p>
            <el-input
              v-model="form.name"
              style="width: 31.25rem"
              placeholder="请输入"
            ></el-input>
          </div>
          <div class="title">
            <p class="font">协会介绍</p>
            <el-input
              v-model="form.content"
              style="width: 31.25rem"
              placeholder="请输入"
            ></el-input>
          </div>
          <div class="title">
            <p class="font">协会Logo</p>
            <imageUpload
              @input="save"
              :value="url"
              :limit="1"
              :urltype="'1'"
              :FileType="'STUDENT'"
            ></imageUpload>
          </div>
        </el-col>
      </el-row>
      <div class="button">
        <el-button size="medium" @click="reset">重置</el-button>
        <el-button type="primary" size="medium" @click="submit"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { saveFriendship } from "@/api/society";
export default {
  data() {
    return {
      // 表单参数
      form: {
        name: "",
        content: "",
        url: [],
      },
      //活动图片
      url: [],
    };
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        name: "",
        content: "",
        url: [],
      },
      (this.url = [])
    },
    //上传详情图片
    save(data) {
      this.form.url = data[0].url;
    },
    /** 提交按钮 */
    submit() {
      if(this.form.url == ''){
        this.$message({
          showClose: true,
          message: '请上传图片!',
          type: 'warning'
        });
        return
      }else{
        let params = {
          ...this.form,
        };
        saveFriendship(params).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "上传信息成功",
              type: "success",
            });
            this.$router.push({ path: "/society/friSociety" });
          } else {
            this.$message.error("上传失败");
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table::before {
  left: 0;
  bottom: 0;
  width: 30%;
  height: .0625rem;
}
.app-container {
  padding: 1.5rem;
  background-color: #f5f5f5;
}
.app-container > div {
  background-color: white;
  padding: 1.5rem;
  height: 50rem;
}
.top {
  display: flex;
  margin: 2.5rem 0rem 2.5rem 3.5rem;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 1rem;
  color: #000000;
  margin-left: .5rem;
  width: 5.625rem;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: .9375rem;
  color: #4F5570;
}
.top > div {
  border-bottom: .0625rem solid #e5e5e5;
  height: .9375rem;
  width: 100%;
  padding-bottom: -1.25rem;
  margin-left: .9375rem;
}
.top::before {
  content: "";
  width: .1875rem;
  background: #2854b7;
  height: 1.25rem;
  border-radius: .125rem;
}
.title,
.button,
.image,
.label {
  margin-left: 4.375rem;
  margin-bottom: 1.875rem;
}
.constitution {
  margin-left: 4.375rem;
}
.button el-button:first-child() {
  width: 5rem;
  line-height: 1.25rem;
  height: 2.5rem;
}
.button el-button:last-child() {
  margin-left: 1.875rem;
  width: 6.875rem;
  height: 2.5rem;
  border: none;
}
</style>
